<template>
  <div class="page-container">
    <SearchPanel @change="handleSearchPanelChange">
      <el-form ref="queryForm" class="query-more-form" size="mini" label-width="100px" :model="query">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="案件编号">
              <el-input v-model="query.versionName" class="search-ipt" placeholder="请输入案件编号" maxlength="255" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="案件状态">
              <el-select class="w-100" v-model="query.versionName" placeholder="请选择案件状态"></el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="办理单位">
              <el-select class="w-100" v-model="query.versionName" placeholder="请选择办理单位"></el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="上报时间">
              <el-time-select class="w-100" v-model="query.versionName"  placeholder="选择时间"></el-time-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="类别">
              <el-select class="w-100" v-model="query.versionName" placeholder="请选择类别"></el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="大类">
              <el-select class="w-100" v-model="query.versionName" placeholder="请选择大类"></el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="小类">
              <el-select class="w-100" v-model="query.versionName" placeholder="请选择小类"></el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" class="btn-col">
            <el-button size="mini" class="search-btn">查询</el-button>
          </el-col>
        </el-row>
      </el-form>
    </SearchPanel>
    <div class="table-container">
      <div class="table-tools-panel table-flex-row">
        <el-button class="flush-btn" size="mini" icon="el-icon-refresh">刷新</el-button>
        <div>
          <el-button class="tools-btn" size="mini" icon="el-icon-printer"></el-button>
          <el-button class="tools-btn" size="mini" icon="el-icon-share"></el-button>
        </div>
      </div>
      <div class="table-list-panel">
        <el-table
          v-loading="tableLoading"
          border
          size="small"
          :data="tableData"
          :height="isShow?'calc(100vh - 465px)':'calc(100vh - 335px)'"
          style="width: 100%"
        >
          <el-table-column type="selection" width="45" />
          <el-table-column prop="key1" label="状态" show-overflow-tooltip >
            <template slot-scope="scope">
              <template v-if="scope.row.key1 == 1">
                <span class="circular state-color-1"></span>
                <span>已超期</span>
              </template>
              <template v-if="scope.row.key1 == 2">
                <span class="circular state-color-2"></span>
                <span>即将超时</span>
              </template>
              <template v-if="scope.row.key1 == 3">
                <span class="circular state-color-3"></span>
                <span>未超时</span>
              </template>
            </template>
          </el-table-column>
          <el-table-column prop="key2" label="办理环节" show-overflow-tooltip >
            <template slot-scope="scope">
              <span class="rect" :class="'rect-color-'+scope.row.key2">退回待审核</span>  
            </template> 
          </el-table-column>
          <el-table-column prop="key3" label="办理街道" show-overflow-tooltip />
          <el-table-column prop="key4" label="案件编号" show-overflow-tooltip />
          <el-table-column prop="key5" label="上报时间" show-overflow-tooltip />
          <el-table-column prop="key6" label="案件大类" show-overflow-tooltip />
          <el-table-column prop="key7" label="案件小类" show-overflow-tooltip />
          <el-table-column label="操作" width="120" fixed="right">
            <template slot-scope="scope">
              <el-button
                class="table-inner-btn"
                type="text"
                size="mini"
              >详情</el-button>
              <el-button
                class="table-inner-btn"
                type="text"
                size="mini"
              >流程</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination-panel">
        <Pagination
          :total="query.total"
          :page.sync="query.page"
          :limit.sync="query.size"
          @pagination="initData"
        />
      </div>
    </div>
  </div>
</template>

<script>
  import SearchPanel from '@/components/SearchPanel'
  import Pagination from '@/components/Pagination'
  export default {
    name: 'CaseDealDispatch',
    components:{
      SearchPanel,Pagination
    },
    data(){
      return {
        query:{
          total: 1,
          page: 1,
          size: 10
        },
        tableLoading: false,
        tableData:[
          {key1: 1,key2: 1,key3: '崇庆街道',key4: '崇州会治理【800053】号',key5: '2021-03-02  12：23：00',key6: '河道管理',key7: '水污染'},
          {key1: 3,key2: 2,key3: '崇庆街道',key4: '崇州会治理【800053】号',key5: '2021-03-02  12：23：00',key6: '河道管理',key7: '水污染'},
          {key1: 2,key2: 3,key3: '崇庆街道',key4: '崇州会治理【800053】号',key5: '2021-03-02  12：23：00',key6: '河道管理',key7: '水污染'},
          {key1: 3,key2: 3,key3: '崇庆街道',key4: '崇州会治理【800053】号',key5: '2021-03-02  12：23：00',key6: '河道管理',key7: '水污染'},
          {key1: 3,key2: 2,key3: '崇庆街道',key4: '崇州会治理【800053】号',key5: '2021-03-02  12：23：00',key6: '河道管理',key7: '水污染'},
          {key1: 2,key2: 1,key3: '崇庆街道',key4: '崇州会治理【800053】号',key5: '2021-03-02  12：23：00',key6: '河道管理',key7: '水污染'},
        ],
        isShow: true
      }
    },
    methods: {
      handleSearchPanelChange(flag){
        this.isShow = flag
      },
      initData(){

      }
    },
  }
</script>

<style lang="scss" scoped>

</style>